<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 搜索与添加区域 -->
        <el-row :gutter="20">
          <el-col :span="2">
            <el-button type="primary" @click="addDialogVisible = true">添加</el-button>
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>
      </div>

      <!-- 权限列表区域 -->
      <el-table :data="rulesList" :stripe="true" style="width: 100%">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="name" label="权限名称"></el-table-column>
        <el-table-column label="图标">
          <template slot-scope="{row}">
            <span :class="row.icon ? row.icon : ''"></span>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路径"></el-table-column>
        <el-table-column label="权限级别">
          <template slot-scope="{row}">
            <el-tag v-if="row.level == 0" type effect="dark">一级</el-tag>
            <el-tag v-if="row.level == 1" type="success" effect="dark">二级</el-tag>
            <el-tag v-if="row.level == 2" type="danger" effect="dark">三级</el-tag>
            <el-tag v-if="row.level == 3" type="warning" effect="dark">四级</el-tag>
            <el-tag v-if="row.level == 4" type="info" effect="dark">五极</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>


<script>
export default {
  rulesLevelFilter(level) {
    const typeMap = {
      0: '',
      1: 'success',
      2: 'danger',
      3: 'warning',
      4: 'info'
    }
    return typeMap[level]
  },
  data() {
    return {
      // 权限列表
      rulesList: []
    }
  },
  created() {
    // 获取所有权限列表
    this.getAllRulesList()
  },
  methods: {
    // 获取所有权限列表
    async getAllRulesList() {
      await this.$http
        .get('rules/list')
        .then(res => {
          res = res.data
          if (!res.code || res.code == 0)
            return this.$message.error(res.msg || '获取数据失败')
          this.rulesList = res.data
        })
        .catch(err => {
          return this.$message.error(err.message)
        })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>